<template>
  <div class="app-container" v-loading="loading">

    <el-timeline v-if="approveHistoryList.length > 0">
      <el-timeline-item
          v-for="item in approveHistoryList"
          :timestamp="item.time"
          placement="top"
      >
        <el-card>
          <template #header>
            <div class="card-header">
              <h4>{{ item.userName }} - {{ item.taskName }} - <el-tag>{{ item.typeName }}</el-tag></h4>
            </div>
          </template>

          <p >{{ item.message }}</p>
        </el-card>
      </el-timeline-item>

    </el-timeline>
    <el-empty v-else description="暂无数据！" />
  </div>
</template>

<script setup name="ApproveHistory">
import {getFlowCommentVosByProcessInstanceId} from "@/api/flowable/bpmn/modelInfo";

// 遮罩层
const loading = ref(true);

// 数据
const approveHistoryList = ref([]);

const props = defineProps({
  procInstId: ''
})

watch(() => props.procInstId, val => {
  val && getList(val);
}, {immediate: true});

/** 查询列表 */
function getList(processInstanceId) {
  loading.value = true;
  getFlowCommentVosByProcessInstanceId({procInstId: processInstanceId}).then(response => {
    approveHistoryList.value = response.data;
    loading.value = false;
  }).catch(e=>{
    loading.value = false;
  });
}


</script>
